<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body class="container-fluid"><br>
		
		<div id="app">
			<!--1. 父组件向子组件传递数据（props）-->
			<p>
				<input type="text" v-model="msg">
				<!--prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来-->
				<child v-bind:message="msg"></child>
				<!--使用.sync修饰符使子组件的改变也能改变父组件-->
				<child v-bind:message.sync="msg"></child>
				<!--
					其会被扩展为：
					<child v-bind:message="msg" @update:message="val => msg = val"></child>
				-->
			</p>
			<p>
				<!--由于obj是一个对象，为引用类型，此时在子组件内部改变它会影响父组件的状态-->
				<son v-bind="obj"></son>
			</p>
			
			
			<!--2. 子组件向父组件传递数据（自定义事件）-->
			<p>
				<!--v-on自定义事件 用来作为 子组件向父组件传递信息的桥梁，子向父传参时，父方法不能有括号-->
				<btn-increment v-on:increment="incrementTotal"></btn-increment>
				+
				<btn-increment v-on:increment="incrementTotal"></btn-increment>
				= 
				{{total}}
			</p>
			
			<p>
				<!--3. 组件里的v-on是自定义事件的，可以使用 .native 修饰 原生事件-->
				<br><btn-increment v-on:click.native="doSome()"></btn-increment>
			</p>
			
			<!--
				总的来说，父子组件间的通信都是通过html标签来间接传递数据的
			-->
			
		</div>

		
		
		<script src="js/vue.js" ></script>
		<script>
			Vue.component('child',{
				// 以属性的方式传参
				props: ['message'],
				template: "<div>"+
						  	"<input type='text' v-model='message'>"+
						  "</div>",
				watch: {
					// 监听子组件的改变，触发事件改变父组件
					// 这样显式地触发一个更新事件，我们就能清楚的知道子组件是何时改变父组件的状态的了
					message: function(newValue){
						this.$emit('update:message',newValue);
					}
				}
			});
			
			Vue.component('son',{
				// 直接传入一个对象，属性为对象的键
				props: ['name','version'],
				template: "<div>"+
						  	"<div>{{name +'： '+ version}}</div>"+
						  "</div>"
			});
			
			Vue.component('btn-increment',{
				template: "<button v-on:click='incrementCount()'>{{count}}</button>",
				data: function(){
					return {
						count: 0
					}
				},
				methods: {
					incrementCount: function(){
						this.count += 1;
						// 触发自定义事件（也就是向父组件报告完成了，至于父组件怎么办则与子组件无关）
						this.$emit('increment', 1); // 传参
					}
				}
			})
			
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '',
					obj: {
						name: 'DOTA',
						version: 'v6.78'
					},
					total: 0
				},
				methods: {
					incrementTotal: function(data){
						this.total += data;
					},
					doSome: function(){
						alert('我是原生click事件！');
					}
				}
			});
			
			
		</script>
	</body>
</html>
